<template>
  <div class="content">
    <div class="search">
      <div class="time">
        <p class="hinttime">申请时间</p>
        <el-date-picker
          v-model="time"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </div>
      <div class="time">
        <p class="hinttime">审批状态</p>
        <el-checkbox
          :indeterminate="isIndeterminate1"
          v-model="checkAll1"
          @change="handleCheckAllChange1"
        >全选</el-checkbox>
        <div style="margin: 15px 0; margin-right:15px"></div>
        <el-checkbox-group v-model="checkedCities1" @change="handleCheckedCitiesChange1">
          <el-checkbox v-for="item in cities1" :label="item.id" :key="item.id">{{item.name}}</el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="time">
        <p class="hinttime">事件类型</p>
        <el-checkbox
          :indeterminate="isIndeterminate"
          v-model="checkAll"
          @change="handleCheckAllChange"
        >全选</el-checkbox>
        <div style="margin: 15px 0; margin-right:15px"></div>
        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
          <el-checkbox v-for="item in cities" :label="item.id" :key="item.id">{{item.name}}</el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="time">
        <p class="hinttime" style="margin-left:15px"></p>
        <el-button type="primary" icon="el-icon-search" @click="seachlist">搜索</el-button>
      </div>
    </div>
    <div class="contentlist" style="width:97%;">
      <el-table
        @cell-click="click"
        :cell-style="cellstyle"
        :data="alllist"
        :header-cell-style="$headerstyle"
        :border="true"
        @selection-change="handleSelectionChange"
        style="width: 100%"
      >
        <el-table-column type="selection" align="center" width="55"></el-table-column>
        <el-table-column prop="get_admin.name" align="center" label="发起人" ></el-table-column>
        <el-table-column prop="get_class.name" align="center" label="事件类型"></el-table-column>
        <el-table-column prop="address" align="center" label="主题" class-name="nameclass" >
           <template slot-scope="scope">
            <el-button type="text" @click.native="a(scope)">主题待定（修改）</el-button>
          </template>
        </el-table-column>

        <el-table-column prop="remark" align="center" label="备注" ></el-table-column>
        <el-table-column prop="created_at" align="center" label="发起时间"></el-table-column>
        <el-table-column  align="center" width="100" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click.native="examineitem(scope)">审批</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="setallpage"
          :current-page.sync="page"
          :page-size="10"
          layout="prev, pager, next, jumper"
          :total="alltotal"
        ></el-pagination>
        <el-button type="primary">批量审核</el-button>
      </div>
      <!-- <div>
    <p>第一审批人：张三（未审批）</p>
      </div>-->
    </div>

    <!-- 合同（新建/修改/删除）修改的需要用不同颜色标注出修改的字段 -->
    <div class="prop" v-show="false">
      <div style="height:150px;width:100%"></div>
      <div class="warpprop">
        <div class="propheader">
          业务审批
          <p class="close1">关闭</p>
        </div>
        <div class="hidenn">
          <div class="info">
            <div class="infoitem">
              <p class="infoname">业务类型：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">发起人：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">发起时间：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">合同号：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">合同金额：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">投放周期：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">代理商：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">广告主：</p>
              <p class="infi-info">合同</p>
            </div>
          </div>
          <div class="resource">
            <h3>资源</h3>
            <el-table :data="tableData3" border :cell-style="$rowstyle"
        :header-cell-style="$headerstyle" style="width: 100%">
              <el-table-column prop="date" label="部门/单位" width="110"></el-table-column>
              <el-table-column prop="name" label="频道" width="120"></el-table-column>
              <el-table-column prop="name" width="150" label="节目位置"></el-table-column>
              <el-table-column prop="name" width="150" label="广告位置"></el-table-column>
              <el-table-column prop="name" width="200" label="播放周期"></el-table-column>
              <el-table-column prop="name" width="100" label="月单价"></el-table-column>
              <el-table-column prop="name" width="100" label="折扣"></el-table-column>
            </el-table>
            <div class="currpage">
              <el-pagination
                small
                :page-size="2"
                layout="prev, pager, next"
                :total="tableData3.length"
              ></el-pagination>
            </div>
          </div>
          <div class="resource">
            <h3>回款计划</h3>
            <el-table :data="tableData3"  :cell-style="$rowstyle"
        :header-cell-style="$headerstyle" border style="width: 100%">
              <el-table-column type="index" :index="indexMethod"></el-table-column>
              <el-table-column prop="date" label="日期" width="300"></el-table-column>
              <el-table-column prop="name" label="项目" width="320"></el-table-column>
              <el-table-column prop="name" width="270" label="金额"></el-table-column>
            </el-table>
            <div class="currpage">
              <el-pagination
                small
                :page-size="2"
                layout="prev, pager, next"
                :total="tableData3.length"
              ></el-pagination>
            </div>
          </div>
          <div class="file">
            <div class="filenam">附件：</div>
            <div class="fileitem">
              <span>证明材料文件名称1;</span>
              <span class="down">点击下载</span>
            </div>
            <div>
              <span>证明材料文件名称1;</span>
              <span class="down">点击下载</span>
            </div>
          </div>
          <div class="examine">
            <div class="examineitem">
              <p class="examinename">审批</p>
              <el-radio v-model="radio" label="1">同意</el-radio>
              <el-radio v-model="radio" label="2">不同意</el-radio>
            </div>
            <div class="examineitem">
              <p class="examinename">审批意见</p>
              <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea"></el-input>
            </div>
          </div>
          <div class="save">
            <el-button type="primary">主要按钮</el-button>
          </div>
        </div>
      </div>
    </div>
    

<!-- 资源锁定（锁定时间可维护，可以是在媒介结构里的字段设置内维护） -->
    <div class="prop" v-show="false">
      <div style="height:150px;width:100%"></div>
      <div class="warpprop">
        <div class="propheader">
          业务审批
          <p class="close1">关闭</p>
        </div>
        <div class="hidenn">
          <div class="info">
            <div class="infoitem">
              <p class="infoname">业务类型：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">发起人：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">发起时间：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">合同号：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">广告预算:</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">投放周期：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">代理商：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">广告主：</p>
              <p class="infi-info">合同</p>
            </div>
          </div>
          <div class="resource">
            <h3>资源</h3>
            <el-table :data="tableData3"  :cell-style="$rowstyle"
        :header-cell-style="$headerstyle" border style="width: 100%">
              <el-table-column prop="date" label="部门/单位" width="110"></el-table-column>
              <el-table-column prop="name" label="频道" width="120"></el-table-column>
              <el-table-column prop="name" width="150" label="节目位置"></el-table-column>
              <el-table-column prop="name" width="150" label="广告位置"></el-table-column>
              <el-table-column prop="name" width="200" label="播放周期"></el-table-column>
              <el-table-column prop="name" width="100" label="月单价"></el-table-column>
              <el-table-column prop="name" width="100" label="折扣"></el-table-column>
            </el-table>
            <div class="currpage">
              <el-pagination
                small
                :page-size="2"
                layout="prev, pager, next"
                :total="tableData3.length"
              ></el-pagination>
            </div>
          </div>
          <div class="datenum">
             <div class="fileitem">
              <span style="margin-right:20px;">锁定时间</span>
               <el-radio v-model="radio" label="1">3天</el-radio>
  <el-radio v-model="radio" label="2">5天</el-radio>
   <el-radio v-model="radio" label="3">15天</el-radio>
  <el-radio v-model="radio" label="4">其他<el-input v-model="input" style="width:60px;margin-left:10px;" placeholder="" :size="'mini'"></el-input></el-radio>
            </div>
          </div>
          <div class="file">
            <div class="filenam">附件：</div>
            <div class="fileitem">
              <span>证明材料文件名称1;</span>
              <span class="down">点击下载</span>
            </div>
            <div>
              <span>证明材料文件名称1;</span>
              <span class="down">点击下载</span>
            </div>
          </div>
          <div class="examine">
            <div class="examineitem">
              <p class="examinename">审批</p>
              <el-radio v-model="radio" label="1">同意</el-radio>
              <el-radio v-model="radio" label="2">不同意</el-radio>
            </div>
            <div class="examineitem">
              <p class="examinename">审批意见</p>
              <el-input type="textarea" :rows="2" placeholder="" v-model="textarea"></el-input>
            </div>
          </div>
          <div class="save">
            <el-button type="primary">提交</el-button>
          </div>
        </div>
      </div>
    </div>
    

<!-- 排期（新建/修改/删除 -->
      <div class="prop" v-show="false">
      <div style="height:150px;width:100%"></div>
      <div class="warpprop">
        <div class="propheader">
          业务审批
          <p class="close1">关闭</p>
        </div>
        <div class="hidenn">
          <div class="info">
            <div class="infoitem">
              <p class="infoname">业务类型：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">发起人：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">发起时间：</p>
              <p class="infi-info">合同</p>
            </div>
         
          </div>
          <div class="resource">
            <h3>资源</h3>
            <el-table :data="tableData3"  :cell-style="$rowstyle"
        :header-cell-style="$headerstyle" border style="width: 100%">
              <el-table-column prop="date" label="城市/资源" width="235"></el-table-column>
              <el-table-column prop="name" label="广告主" width="235"></el-table-column>
              <el-table-column prop="name" width="235" label="播放日期"></el-table-column>
              <el-table-column prop="name" width="233" label="资源来源"></el-table-column>
            </el-table>
            <div class="currpage">
              <el-pagination
                small
                :page-size="2"
                layout="prev, pager, next"
                :total="tableData3.length"
              ></el-pagination>
            </div>
          </div>
         
         
          <div class="examine">
            <div class="examineitem">
              <p class="examinename">审批</p>
              <el-radio v-model="radio" label="1">同意</el-radio>
              <el-radio v-model="radio" label="2">不同意</el-radio>
            </div>
            <div class="examineitem">
              <p class="examinename">审批意见</p>
              <el-input type="textarea" :rows="2" placeholder="" v-model="textarea"></el-input>
            </div>
          </div>
          <div class="save">
            <el-button type="primary">提交</el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 项目报备 -->
      <div class="prop" v-show="false">
      <div style="height:150px;width:100%"></div>
      <div class="warpprop">
        <div class="propheader">
          业务审批
          <p class="close1">关闭</p>
        </div>
        <div class="hidenn">
          <div class="info">
            <div class="infoitem">
              <p class="infoname">业务类型：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">发起人：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">发起时间：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">代理公司：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">投放资源：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">报备日期：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">投放栏目：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">申报人：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">投放时间（月份）：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">申报电话：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">广告预算：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">客户名称：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">意向位置A：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">客户地址：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">意向位置B：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">联系人职务：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">意向位置C：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">客户类别：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">预计项目完成时间：</p>
              <p class="infi-info">合同</p>
            </div>
         
          </div>
         <div class="project">
           <div class="examineitem">
              <p class="examinename" style="width:150px;">项目进度情况</p>
              <el-input type="textarea" :rows="2" placeholder="" v-model="textarea"></el-input>
            </div>
            <div class="examineitem" style="margin-top:20px;">
              <p class="examinename" style="width:150px;">备注</p>
              <el-input type="textarea" :rows="2" placeholder="" v-model="textarea"></el-input>
            </div>
         </div>
         
         
          <div class="examine">
            <div class="examineitem">
              <p class="examinename">审批</p>
              <el-radio v-model="radio" label="1">同意</el-radio>
              <el-radio v-model="radio" label="2">不同意</el-radio>
            </div>
            <div class="examineitem">
              <p class="examinename">审批意见</p>
              <el-input type="textarea" :rows="2" placeholder="" v-model="textarea"></el-input>
            </div>
          </div>
          <div class="save">
            <el-button type="primary">提交</el-button>
          </div>
        </div>
      </div>
    </div>
   <!-- 产品策划 -->
      <div class="prop" v-show="false">
      <div style="height:150px;width:100%"></div>
      <div class="warpprop">
        <div class="propheader">
          业务审批
          <p class="close1">关闭</p>
        </div>
        <div class="hidenn">
          <div class="info">
            <div class="infoitem">
              <p class="infoname">业务类型：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">发起人：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">发起时间：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">方案编号：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">一级分类:</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">方案名称：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">二级分类：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">套餐费用：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">限定行业：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">有效日期：</p>
              <p class="infi-info">合同</p>
            </div>
          </div>
          <div class="resource">
            <h3>媒体资源</h3>
            <el-table :data="tableData3"  :cell-style="$rowstyle"
        :header-cell-style="$headerstyle" border style="width: 100%">
              <el-table-column prop="date" label="部门/单位" width="110"></el-table-column>
              <el-table-column prop="name" label="广告类型" width="120"></el-table-column>
              <el-table-column prop="name" width="150" label="节目位置"></el-table-column>
              <el-table-column prop="name" width="150" label="广告位置"></el-table-column>
              <el-table-column prop="name" width="200" label="播放周期"></el-table-column>
              <el-table-column prop="name" width="100" label="长度（s）"></el-table-column>
              <el-table-column prop="name" width="100" label="播放周期"></el-table-column>
            </el-table>
            <div class="currpage">
              <el-pagination
                small
                :page-size="2"
                layout="prev, pager, next"
                :total="tableData3.length"
              ></el-pagination>
            </div>
          </div>
        
          <div class="file">
            <div class="filenam">附件：</div>
            <div class="fileitem">
              <span>证明材料文件名称1;</span>
              <span class="down">点击下载</span>
            </div>
            <div>
              <span>证明材料文件名称1;</span>
              <span class="down">点击下载</span>
            </div>
          </div>
          <div class="examine">
            <div class="examineitem">
              <p class="examinename">审批</p>
              <el-radio v-model="radio" label="1">同意</el-radio>
              <el-radio v-model="radio" label="2">不同意</el-radio>
            </div>
            <div class="examineitem">
              <p class="examinename">审批意见</p>
              <el-input type="textarea" :rows="2" placeholder="" v-model="textarea"></el-input>
            </div>
          </div>
          <div class="save">
            <el-button type="primary">提交</el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 补播 -->
    <div class="prop" v-show="false">
      <div style="height:150px;width:100%"></div>
      <div class="warpprop">
        <div class="propheader">
          业务审批
          <p class="close1">关闭</p>
        </div>
        <div class="hidenn">
          <div class="info">
            <div class="infoitem">
              <p class="infoname">业务类型：</p>
              <p class="infi-info">补播</p>
            </div>
            <div class="infoitem">
              <p class="infoname">发起人：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">发起时间：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">合同号：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">合同名称:</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">补播时间段：</p>
              <p class="infi-info">合同</p>
            </div>
           
          </div>
          <div class="resource">
            <h3>资源</h3>
            <el-table :data="tableData3"  :cell-style="$rowstyle"
        :header-cell-style="$headerstyle" border style="width: 100%">
              <el-table-column
      type="index"
      :index="indexMethod">
    </el-table-column>
              <el-table-column prop="date" label="部门/单位" width="110"></el-table-column>
              <el-table-column prop="name" width="150" label="频道"></el-table-column>
              <el-table-column prop="name" width="180" label="广告位置"></el-table-column>
              <el-table-column prop="name" width="250" label="播出日期"></el-table-column>
              <el-table-column prop="name" width="100" label="月单价"></el-table-column>
              <el-table-column prop="name" width="100" label="折扣"></el-table-column>
            </el-table>
            <div class="currpage">
              <el-pagination
                small
                :page-size="2"
                layout="prev, pager, next"
                :total="tableData3.length"
              ></el-pagination>
            </div>
          </div>
         <div class="project" style="margin-top:30px;">
           <div class="examineitem">
              <p class="examinename" style="width:120px;">补播说明</p>
              <el-input type="textarea" :rows="2" placeholder="" v-model="textarea"></el-input>
            </div>
            
         </div>
          <div class="file">
            <div class="filenam">附件：</div>
            <div class="fileitem">
              <span>证明材料文件名称1;</span>
              <span class="down">点击下载</span>
            </div>
            <div>
              <span>证明材料文件名称1;</span>
              <span class="down">点击下载</span>
            </div>
          </div>
          <div class="examine">
            <div class="examineitem">
              <p class="examinename">审批</p>
              <el-radio v-model="radio" label="1">同意</el-radio>
              <el-radio v-model="radio" label="2">不同意</el-radio>
            </div>
            <div class="examineitem">
              <p class="examinename">审批意见</p>
              <el-input type="textarea" :rows="2" placeholder="" v-model="textarea"></el-input>
            </div>
          </div>
          <div class="save">
            <el-button type="primary">提交</el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 回款 -->
    <div class="prop" v-show="false">
      <div style="height:150px;width:100%"></div>
      <div class="warpprop">
        <div class="propheader">
          业务审批
          <p class="close1">关闭</p>
        </div>
        <div class="hidenn">
          <div class="info">
            <div class="infoitem">
              <p class="infoname">业务类型：</p>
              <p class="infi-info">回款</p>
            </div>
            <div class="infoitem">
              <p class="infoname">发起人：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">发起时间：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">合同号：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">合同名称:</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">合同周期：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">合同额：</p>
              <p class="infi-info">合同</p>
            </div>
           
          </div>
          <div class="resource">
            <h3>合同款项</h3>
            <el-table :data="tableData3"  :cell-style="$rowstyle"
        :header-cell-style="$headerstyle" border style="width: 100%">
              <el-table-column prop="date" label="日期" width="100"></el-table-column>
              <el-table-column prop="name" label="项目" width="100"></el-table-column>
              <el-table-column prop="name" width="100" label="金额（万元）"></el-table-column>
              <el-table-column prop="name" width="100" label="回款日期"></el-table-column>
              <el-table-column prop="name" width="100" label="回款金额（万元）"></el-table-column>
              <el-table-column prop="name" width="100" label="回款凭证"></el-table-column>
              <el-table-column prop="name" width="100" label="状态"></el-table-column>
              <el-table-column prop="name" width="238" label="说明"></el-table-column>
            </el-table>
            <div class="currpage">
              <el-pagination
                small
                :page-size="2"
                layout="prev, pager, next"
                :total="tableData3.length"
              ></el-pagination>
            </div>
          </div>
        
          
          <div class="examine">
            <div class="examineitem">
              <p class="examinename">审批</p>
              <el-radio v-model="radio" label="1">同意</el-radio>
              <el-radio v-model="radio" label="2">不同意</el-radio>
            </div>
            <div class="examineitem">
              <p class="examinename">审批意见</p>
              <el-input type="textarea" :rows="2" placeholder="" v-model="textarea"></el-input>
            </div>
          </div>
          <div class="save">
            <el-button type="primary">提交</el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 媒体资源 -->
     <div class="prop" v-show="false">
      <div style="height:150px;width:100%"></div>
      <div class="warpprop">
        <div class="propheader">
          业务审批
          <p class="close1">关闭</p>
        </div>
        <div class="hidenn">
          <div class="info">
            <div class="infoitem">
              <p class="infoname">业务类型：</p>
              <p class="infi-info">媒体资源</p>
            </div>
            <div class="infoitem">
              <p class="infoname">发起人：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">发起时间：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">长度：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">是否可拆分:</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">媒介：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">暴露频次：</p>
              <p class="infi-info">媒体资源</p>
            </div>
            <div class="infoitem">
              <p class="infoname">频道：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">播出日期：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">节目位置：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">最小播出周期:</p>
              <p class="infi-info">合同</p>
            </div> <div class="infoitem">
              <p class="infoname">广告类型：</p>
              <p class="infi-info">媒体资源</p>
            </div>
            <div class="infoitem">
              <p class="infoname">最长播出周期：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">资源名称：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">播出时段：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">关联城市:</p>
              <p class="infi-info">合同</p>
            </div> <div class="infoitem">
              <p class="infoname">有效期：</p>
              <p class="infi-info">媒体资源</p>
            </div>
            <div class="infoitem">
              <p class="infoname">资源级别：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">说明：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">经营形式：</p>
              <p class="infi-info">合同</p>
            </div>
          
          </div>
         
         <div class="price">
         <h3>价格</h3>
         <div class="pricecontent">
           <div class="priceitem" v-for="i in 3" :key="i">
             <p class="itemli">价格{{i}}</p>
              <p class="itemli">时间：</p>
               <p class="itemli">长度：</p>
                <p class="itemli">数量：</p>
                 <p class="itemli">价格：</p>
                  <p class="itemli">限定行业：</p>
           </div>
         </div>
         </div>
          <div class="file">
            <div class="filenam">附件：</div>
            <div class="fileitem">
              <span>证明材料文件名称1;</span>
              <span class="down">点击下载</span>
            </div>
            <div>
              <span>证明材料文件名称1;</span>
              <span class="down">点击下载</span>
            </div>
          </div>
          <div class="examine">
            <div class="examineitem">
              <p class="examinename">审批</p>
              <el-radio v-model="radio" label="1">同意</el-radio>
              <el-radio v-model="radio" label="2">不同意</el-radio>
            </div>
            <div class="examineitem">
              <p class="examinename">审批意见</p>
              <el-input type="textarea" :rows="2" placeholder="" v-model="textarea"></el-input>
            </div>
          </div>
          <div class="save">
            <el-button type="primary">提交</el-button>
          </div>
        </div>
      </div>
    </div>
     <!-- 预排期 -->
    <div class="prop" v-show="false">
      <div style="height:150px;width:100%"></div>
      <div class="warpprop">
        <div class="propheader">
          业务审批
          <p class="close1">关闭</p>
        </div>
        <div class="hidenn">
          <div class="info">
            <div class="infoitem">
              <p class="infoname">业务类型：</p>
              <p class="infi-info">预排期</p>
            </div>
            <div class="infoitem">
              <p class="infoname">发起人：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">发起时间：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">合同号：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">合同名称:</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">播放周期：</p>
              <p class="infi-info">合同</p>
            </div>
            <div class="infoitem">
              <p class="infoname">合同额：</p>
              <p class="infi-info">合同</p>
            </div>
           
          </div>
          <div class="resource">
            <h3>播放资源</h3>
            <el-table :data="tableData3"  :cell-style="$rowstyle"
        :header-cell-style="$headerstyle" border style="width: 100%">
              <el-table-column prop="date" label="频道" width="235"></el-table-column>
              <el-table-column prop="name" label="广告位置" width="235"></el-table-column>
              <el-table-column prop="name" width="235" label="播出日期"></el-table-column>
              <el-table-column prop="name" width="233" label="资源来源"></el-table-column>
            </el-table>
            <div class="currpage">
              <el-pagination
                small
                :page-size="2"
                layout="prev, pager, next"
                :total="tableData3.length"
              ></el-pagination>
            </div>
          </div>
        
          <div class="versions">
          <div class="versionsleft">
            <p>版本：</p>
            <p>素材编号:app1223</p>
            <p>素材名称：鲁花6连板图片</p>
            <p>素材描述：滴滴鲁花、香飘万家</p>
          </div>
          <img class="img" src="../../assets/img/logo.jpg" alt="">
          </div>
          <div class="examine">
            <div class="examineitem">
              <p class="examinename">审批</p>
              <el-radio v-model="radio" label="1">同意</el-radio>
              <el-radio v-model="radio" label="2">不同意</el-radio>
            </div>
            <div class="examineitem">
              <p class="examinename">审批意见</p>
              <el-input type="textarea" :rows="2" placeholder="" v-model="textarea"></el-input>
            </div>
          </div>
          <div class="save">
            <el-button type="primary">提交</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {ClassThing,getApplayManagerList} from '@/api/Approval.js'
import {SETDATE} from '../../api/System.js'
export default {
  name: "examine",
  data() {
    return {
      //列表页数
      page:1,
      //查询总数
      alltotal:0,
      //审批列表
      alllist:[],
      input:'',
      textarea: "",
      radio: "1",

      checkAll: false,
      //事件类型选中列表
      checkedCities: [],
      cities: [ ],
      isIndeterminate: true,

      checkAll1: false,
      checkedCities1: [],
      cities1:[
         {name:'已审批',id:'1'},
         {name:'未审核',id:'2'},

         {name:'撤回',id:'3'},

        ],
        //
        time:[],
      isIndeterminate1: true,

      currentPage3: 1,
      value1: "",
      radio: "1",
      tableData3: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "王小虎",
          status: "查看",
          ed: "审批"
        },

        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          status: "查看",
          ed: "审批"
        }
      ]
    };
  },
  created() {
    this.getthinglist()
    this.getlist()
  },
  methods: {
    //点击赛选
    seachlist(){
    console.log(this.time)
    console.log('事件'+this.checkedCities)
    console.log('状态'+this.checkedCities1)
    this.page=1
    },
    //获取查询列表
    getlist(){
      var data={}
      if(this.time.length>0){
        data.start_time=new Date(this.time[0])
        data.end_time	=new Date(this.time[1])
      }else{
        data.start_time=''
        data.end_time	=''
      }
      //状态
      data.status=this.checkedCities1
      // 事件类型
      data.class_id	=this.checkedCities
      data.per=10
      data.page=this.page
      getApplayManagerList(data).then(res=>{
        console.log(res)
       if(res.code==200){
         this.alllist=res.data.data
         this.alltotal=res.data.total
         this.page=res.data.current_page
         this.alllist.forEach(element => {
           element.created_at=SETDATE(element.created_at)
         });
       }else{
         this.alllist=[]
         this.alltotal=0
       }
      })
    },
    //查询列表页数改变
    setallpage(e){
   this.page=1
   this.alltotal=0
   this.getlist()
    },
    //获取事件类型你列表
    getthinglist(){
      ClassThing().then(res=>{
        // console.log(res)
        if(res.code==200){
        this.cities=res.data
        }
      })
    },
     indexMethod(index) {
        return index * 2;
      },
    handleSelectionChange(e) {
      console.log(e);
    },
    handleCheckAllChange1(val) {
      var arr=[]
      this.cities1.forEach(element => {
        arr.push(element.id)
      });
      this.checkedCities1 = val ? arr : [];
      this.isIndeterminate1 = false;
    },
    handleCheckedCitiesChange1(value) {
      let checkedCount1 = value.length;
      this.checkAll1 = checkedCount1 === this.cities1.length;
      this.isIndeterminate1 =
        checkedCount1 > 0 && checkedCount1 < this.cities1.length;
    },
    handleCheckAllChange(val) {
      console.log(val)
      var arr=[]
      this.cities.forEach(element => {
        arr.push(element.id)
      });
      this.checkedCities = val ? arr : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      console.log(value)
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      console.log( checkedCount === this.cities.length)
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
    click(row, column, cell, event) {
      console.log(column);
      this.open();
    },
    open() {
      //       this.$alert('<p>第一审批人：张三（未审批）</p>    <p>第一审批人：张三（未审批）</p>', '审批路径', {
      //   dangerouslyUseHTMLString: true,
      //   center:true
      // });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    cellstyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 3) {
        // 指定列号
        return "color:#0000FF;text-decoration: underline;";
      }
      if (columnIndex === 6) {
        // 指定列号
        return "color:#0000FF;text-decoration: underline;";
      }
    }
  }
};
</script>
<style lang="scss">
.time {
  display: flex;
  align-items: center;
}
.hinttime {
  margin-right: 20px;
  margin-left: 30px;
  font-weight: 500;
}
.contentlist {
  width: 97%;
  margin: 0 auto;
  margin-top: 50px;
  margin-bottom: 100px;
}
.page {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  margin-top: 10px;
}
.prop {
  width: calc(100% - 210px);
  height: 100%;
  position: fixed;
  top: 0;
  // background: red;
  background: rgba($color: #000000, $alpha: 0.5);
  z-index: 998;
}
.warpprop {
  width: 1000px;
  height: 600px;
  // background: blue;
  background: #fff;
  margin: 0 auto;
  border-radius: 10px;
}
.propheader {
  height: 46px;
  width: 100%;
  background: rgba(242, 242, 242, 1);
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  line-height: 46px;
  text-align: center;
  position: relative;
}
.close1 {
  position: absolute;
  right: 10px;
  top: -15px;
  color: #169bd5;
}
.hidenn {
  width: 100%;
  height: 500px;
  overflow-y: auto;
}
.hidenn::-webkit-scrollbar {
  // 纵向滚动条和横向滚动条宽度
  width: 2px;
  // height: 1px;
}

.hidenn::-webkit-scrollbar-thumb {
  // 滚动条背景条样式
  border-radius: 1px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #5b5f63;
}
.hidenn::-webkit-scrollbar-track {
  // 滚动条按钮样式
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 1px;
  background: #00284d;
}

.propheader {
  height: 46px;
  width: 100%;
  background: rgba(242, 242, 242, 1);
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  line-height: 46px;
  text-align: center;
  position: relative;
}
.close1 {
  position: absolute;
  right: 10px;
  top: -15px;
  color: #169bd5;
}
.info {
  width: 940px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}
.infoitem {
  height: 35px;
  width: 50%;
  display: flex;
  align-items: center;
}
.resource {
  width: 940px;
  margin: 0 auto;
}
.currpage {
  float: right;
}
.file {
  width: 800px;
  margin: 0 auto;
}
.fileitem {
  font-size: 16px;
  height: 35px;
  line-height: 35px;
}
.filenam {
  height: 30px;
  margin-top: 30px;
}
.down {
  color: #02a7f0;
}
.examine {
  width: 800px;
  margin: 0 auto;
  margin-top: 20px;
}
.examineitem {
  display: flex;
  align-items: center;
}
.examinename {
  width: 100px;
}
.save {
  width: 60px;
  margin: 0 auto;
  margin-top: 30px;
  margin-bottom: 60px;
}
.datenum{
  width: 940px;
  margin: 0 auto;
  margin-top: 30px;
}
.project{
  width: 940px;
  margin: 0 auto;
  margin-top: 20px;
}
.versions{
  width: 940px;
  margin: 0 auto;
  margin-top: 30px;
  display: flex;
  align-items: center;
}
.versionsleft{
  width: 400px;
}
.versionsleft p{
  height: 25px;
}
.img{
  width: 150px;
  height: 100px;
}
.price{
  width: 940px;
  margin: 0 auto;
}
.pricecontent{
  width: 100%;
  display: flex;
}
.priceitem{
width: 30%
}
</style>